<template>
  <nav class="button-list">
    <ul>
      <li
          v-for="(button, index) in buttons"
          :key="button.value"
          :data-index="index"
          @click="handleClick(button.value)"
      >
        <span>{{ button.label }}</span>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps({
  buttons: {
    type: Array,
    required: true,
    default: () => [
      { value: 'add', label: '新增' },
      { value: 'import', label: '导入' },
      { value: 'export', label: '导出' },
    ],
  },
});

// 定义 emits
const emit = defineEmits(['button-click']);

// 处理按钮点击
const handleClick = (value) => {
  emit('button-click', value);
};
</script>

<style scoped>
/* 按钮列表样式 */
.button-list {
  box-sizing: border-box;
  background-color: #ffffff; /* 白色背景 */
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 20px auto;
}

.button-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* 支持换行 */
}

.button-list li {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
}

.button-list li span {
  display: block;
  padding: 10px 20px;
  border-radius: 8px;
  color: white; /* 默认文字颜色为白色 */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 根据索引设置默认背景色 */
.button-list li[data-index='0'] span {
  background-color: #1e90ff; /* 蓝色 */
}

.button-list li[data-index='1'] span {
  background-color: #32cd32; /* 绿色 */
}

.button-list li[data-index='2'] span {
  background-color: #ffa500; /* 橙色 */
}

.button-list li[data-index='3'] span {
  background-color: #9370db; /* 紫色 */
}

.button-list li[data-index='4'] span {
  background-color: #ff4500; /* 红色 */
}

.button-list li[data-index='5'] span {
  background-color: #00ced1; /* 青色 */
}

.button-list li[data-index='6'] span {
  background-color: #ff69b4; /* 粉色 */
}

.button-list li[data-index='7'] span {
  background-color: #8a2be2; /* 蓝紫色 */
}

.button-list li[data-index='8'] span {
  background-color: #ffd700; /* 金色 */
}

/* 悬停状态样式 */
.button-list li:hover span {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1); /* 悬停状态稍微提亮 */
}
</style>